import React,{Component} from 'react';
import './App.css';
import axios from 'axios'
import './mock/index'
import {Movie} from './types/index'
import quickSort from './util/quickSort'

interface IState{
    list:Movie[],
    type:string,
    target:number,
    total:number
}

interface IProps{}

class App extends Component<IProps,IState>{
    componentDidMount(){
        axios.get('/api/list').then(res => {
            //进行快速排序
            this.totalFun(res.data.data);
            this.setState({
                list:quickSort<Movie>(res.data.data)
            })
        })
    }
    
    state = {
        list:[],     //电影列表
        type:'zong', //显示的票房类型
        target:-1,   //选择优先显示谁
        total:0      //总票房
    }
    render(){
        let {list,type,target,total} = this.state;
        let list1 = list.filter((item:Movie) => item.isShow);
        let list2 = list.filter((item:Movie) => !item.isShow);
        let targetObj:any = target != -1 && list[target];
        return (
            <div className="App">
                <div className="left">
                    左边
                    {targetObj.name}
                    总票房：{total}
                </div>
                
                <div className="right">
                        <div>
                            <button className={type==='zong'?'active':''} onClick={()=> this.tab('zong')}>综合票房</button>
                            <button className={type!='zong'?'active':''} onClick={()=>this.tab('fen')}>分账票房</button>
                        </div>
                    
                        <table>
                            <thead>
                                <tr>
                                    <td>
                                        影片
                                    </td>
                                    <td>
                                    {type === 'zong'?'综合票房':'分账票房'} 
                                    </td>
                                    <td>
                                        票房占比
                                    </td>
                                    <td>
                                        排片场次
                                    </td>
                                    <td>
                                        排片占比
                                    </td>
                                    <td>
                                        场均人次
                                    </td>
                                    <td>
                                        上座率
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                            {list.length && [...list1,...list2].map((item:Movie) => <tr key={item.id}>
                                <td onClick={() => {
                                    if(target === -1){
                                        item.isShow = true;
                                        this.setState({
                                            target:item.id
                                        })
                                    }else if(target === item.id){
                                        item.isShow = false;
                                        this.setState({
                                            target:-1
                                        })
                                    }
                                    
                                }}>
                                    <h4>{item.name}</h4>
                                    上映天数：<span>{item.days}</span>
                                    <div className={target === item.id?'active':''}>*</div>
                                    <span>{type === 'zong'?item.zongTotal:item.fenTotal}</span>
                                </td>
                                <td>
                                    {type === 'zong'?item.zongAccounts:item.fenAccounts}
                                </td>
                                <td>
                                    {type === 'zong'?item.zongProportion:item.fenProportion}
                                </td>
                                <td>
                                    {item.scene}
                                </td>
                                <td>
                                    {item.scenePoportion}
                                </td>
                                <td>
                                    {item.num}
                                </td>
                                <td>
                                    {item.rate}
                                </td>
                            </tr>)}
                            </tbody>
                        </table>
                </div>
                
            </div>
          );
    }

    //计算总票房
    totalFun = (data:Movie[]) => {
        let {type} = this.state;
        let total = data.reduce((pre:number,cur:Movie) => {
            return type === 'zong' ? pre+cur.zongAccounts : pre+cur.fenAccounts
        },0)
        this.setState({
            total
        })
    }

    //切换类别
    tab = (type:string) => {
        let {list} = this.state;
        this.setState({type},() => {
            this.totalFun(list);
        });
    }
}

export default App;
